<template>
  <el-dialog :close-on-click-modal="false" v-model="visible" title="预览" @close="resetForm" width="40%">
    <div v-loading="loading" shadow="never">
      <div class="table-wrapper">
        <el-table :data="tableData" max-height="64vh">
          <el-table-column v-for="item in headerList" :key="item.id" :prop="item.column" align="center">
            <template #header>
              {{ item.comment }}
              <el-icon v-if="item.dict" style="cursor: pointer" @click="handleDict(item)"><Search /></el-icon>
            </template>
          </el-table-column>
        </el-table>
        <div class="flex justify-end">
          <el-pagination
            v-model:current-page="paginationData.currentPage"
            background
            layout="total, prev, pager, next"
            :total="paginationData.total"
            :page-size="paginationData.pageSize"
            @current-change="getTableData"
            :small="true"
            class="flex justify-end mt-2"
          />
        </div>
      </div>
    </div>
  </el-dialog>
  <el-dialog v-model="visibleDict" :title="dictData.comment" width="30%">
    <div class="table-wrapper">
      <el-table :data="dictData.dict" max-height="64vh">
        <el-table-column prop="name" label="名称" align="center" />
        <el-table-column prop="value" label="值" align="center" />
      </el-table>
    </div>
  </el-dialog>
</template>

<script setup>
import { myDataPreview } from '@/api/myData'
import { Search, Refresh, Plus, ArrowDown } from '@element-plus/icons-vue'
import { reactive, watch } from 'vue-demi'
const props = defineProps({
  id: {
    type: String,
    default: ''
  },
  visible: {
    type: Boolean,
    default: false
  }
})
const emit = defineEmits(['update:visible', 'create', 'update'])
const paginationData = reactive({
  total: 0,
  pageSize: 10,
  currentPage: 1
})
const loading = ref(false)
const visibleDict = ref(false)
const tableData = ref([])
const headerList = ref([])
const dictData = ref({})
watch(
  () => props.visible,
  (val) => {
    if (val) {
      getTableData()
    }
  }
)
const getTableData = () => {
  loading.value = true
  myDataPreview(props.id, paginationData.currentPage, paginationData.pageSize)
    .then((res) => {
      tableData.value = res.data.data
      paginationData.total = parseInt(res.data.total)
      headerList.value = res.data.metadata
    })
    .finally(() => {
      loading.value = false
    })
}
const resetForm = () => {
  tableData.value = []
  headerList.value = []
  dictData.value = {}
  paginationData.total = 0
  paginationData.pageSize = 10
  paginationData.currentPage = 1
  emit('update:visible')
}
const handleDict = (item) => {
  dictData.value = item
  visibleDict.value = true
}
</script>

<style lang="scss" scoped></style>
